<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        #container {
            width: 100%;
            height: 100%;
        }

        /* .button {
            position: absolute;
            left: 10px;
            padding: 1rem;
        }

        #controlButton {
            top: 1rem;
        }

        #modeButton {
            top: 4rem;
        }

        #videoButton {
            top: 150px;
            display: none;
        } */
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="./js/three.min.js"></script>
    <script src="./js/panolens.min.js"></script>
    <script>
        (function () {
            // 初始化容器 和 部分设置
            let viewer = new PANOLENS.Viewer({
                container: document.querySelector('#container'),
                controlButtons: ['fullscreen', 'setting', 'video'],
                autoRotate: true, //自动播放
                autoRotateActivationDuration: 2000, //时长
                autoRotateSpeed: 0.3 //速度
            });

            // 加入图片
            let panorama = new PANOLENS.ImagePanorama('https://pchen66.github.io/panolens.js/examples/asset/textures/equirectangular/view.jpg');

            // 把图片放在容器里
            viewer.add(panorama);
        })();
    </script>
    <!-- <script>
        var panorama, viewer, container, infospot, controlButton, modeButton, videoButton;

        var controlIndex = PANOLENS.CONTROLS.ORBIT;
        var modeIndex = 0;
        var videoPlaying = false;

        container = document.querySelector('#container');
        controlButton = document.querySelector('#controlButton');
        modeButton = document.querySelector('#modeButton');
        videoButton = document.querySelector('#videoButton');
        console.log(new PANOLENS.ImagePanorama());
        panorama = new PANOLENS.ImagePanorama('./imgs/tunnel.jpg');


        infospot = new PANOLENS.Infospot(350, PANOLENS.DataImage.Info);
        infospot.position.set(0, -2000, -5000);

        panorama.add(infospot);

        viewer = new PANOLENS.Viewer({ container: container });
        viewer.add(panorama);

        // Method to trigger control
        controlButton.addEventListener('click', function () {

            controlIndex = controlIndex >= 1 ? 0 : controlIndex + 1;

            switch (controlIndex) {

                case 0: viewer.enableControl(PANOLENS.CONTROLS.ORBIT); break;
                case 1: viewer.enableControl(PANOLENS.CONTROLS.DEVICEORIENTATION); break;
                default: break;

            }

        });

        modeButton.addEventListener('click', function () {

            modeIndex = modeIndex >= 2 ? 0 : modeIndex + 1;

            switch (modeIndex) {

                case 0: viewer.disableEffect(); break;
                case 1: viewer.enableEffect(PANOLENS.MODES.CARDBOARD); break;
                case 2: viewer.enableEffect(PANOLENS.MODES.STEREO); break;
                default: break;

            }

        });

        // if it's video panorama
        videoButton.addEventListener('click', function () {

            videoPlaying = !videoPlaying;
            viewer.toggleVideoPlay(videoPlaying ? false : true);

        });
    </script> -->
</body>

</html>